<template>
  <div id="box">
    <div id="from" style="width: 600px;margin: auto">
      <h2 style="margin-left: 200px">新增放映信息</h2>

      <el-form ref="form" :model="ShowFVO" label-width="80px">
        <el-form-item label="电影名称">
          <el-select v-model="values" placeholder="请选择电影名称" @change="changeLocationValue">
            <span v-for="item in options" :key="item.value">
              <el-option
                :label="item.label"
                :value="item.value"
              />
            </span>
          </el-select>
        </el-form-item>

        <el-form-item label="场次">
          <el-date-picker
            v-model="ShowFVO.s_day"
            type="datetime"
            value-format="yyyy年MM月dd日#HH:mm"
            placeholder="选择日期"
          />
        </el-form-item>

        <el-form-item label="放映厅">
          <el-input v-model="ShowFVO.s_playhall" type="text" style="width: 200px" class="inp" />
        </el-form-item>

        <el-form-item id="buttall">
          <el-button type="primary" @click="onSubmit(ShowFVO)">立即增加</el-button>
          <el-button id="butt2" @click="toMain">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Addtimetable',
  data() {
    return {
      films: [{
        fnId: -1,
        fnName: ''
      }],
      values: {
        value: 0,
        label: '-请选择电影-'
      },
      options: [],
      ShowFVO: [
        {
          // id:,
          of_id: 1,
          name: '勇敢者游戏2：再战巅峰',
          s_day: '12月21日',
          s_hour: '8:00',
          s_playhall: 1
        }
      ]

    }
  },
  created() {
    this.show()
  },

  methods: {
    show() { // 展示所有信息
      var vm = this
      this.axios({
        url: 'http://localhost:81/api/show/filmsname'
      }).then(function(res) {
        if (res.data.success) {
          console.log(res.data)
          vm.films = res.data.data

          for (var i = 0; i < vm.films.length; i++) {
            var t = {
              value: vm.films[i].id,
              label: vm.films[i].fnName
            }
            vm.options.push(t)
          }
          console.log(vm.options)
        }
      })
    },
    changeLocationValue(val) {
      console.log('当前电影id')
      console.log(val)
      this.ShowFVO.of_id = val
    },

    toMain() { // 添加电影的方法
      this.$router.push('/timetable')
    },
    onSubmit(movies) {
      console.log(movies)
      movies.s_playhall = parseInt(movies.s_playhall)
      var vm = this
      this.axios({
        url: 'http://localhost:81/api/show/add',
        params: {
          of_id: movies.of_id,
          name: movies.name,
          s_day: movies.s_day,
          s_playhall: movies.s_playhall
        }
      }).then(function(res) {
        if (res.data.success) {
          if (res.data.data > 0) {
            vm.$message({
              message: '添加成功',
              type: 'success',
              center: true
            })
            vm.$router.push('/timetable')
          }
        } else {
          vm.$message({
            message: '添加失败',
            type: 'error',
            center: true
          })
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
